<template>
  <div class="body">
    <NavbarTurn @func="getMsgFormSon" @func1="getMsgFormSon1" @func2="getMsgFormSon2"></NavbarTurn>
    <div class="content" :style="{marginTop: (msgFormSon+msgFormSon1+5)+ 'px'}">
      <text class="font">订单退款中</text>
    </div>
    <div class="content2">
      <text class="font2">收货地址：</text>
      <text class="font3">{{name}}</text>
      <text class="font4">{{phone}}</text>
    </div>
    <div class="content3">
      <text class="font5">{{address}}</text>
    </div>
    <scroll-view style="height:1000px">
      <div class="content4" v-for="(item,index) in paintings" :key="index">
        <div class="content5"><text class="font6">商品内容</text></div>
        <div class="line"></div>
        <div class="content5">
          <image class="pic" :src="item.imageUrlList"></image>
          <text class="font7">{{item.paintingName}}</text>
          <text class="font8">¥{{item.paintingPrice}}</text>
        </div>
        <div class="line2"></div>
        <div class="content5">
          <text class="font9">共1件商品，合计{{item.paintingPrice}}元</text>
        </div>
      </div>
      <div class="content6">
        <text class="font10">订单号：{{orderNumber}}</text>
        <text class="font11">下单时间：{{orderTime}}</text>
        <text class="font11">商品金额：¥{{commodityAmount}}</text>
        <text class="font11">商品优惠：-¥{{commodityDiscount}}</text>
        <text class="font11">应付金额：¥{{shouldPay}}</text>
        <text class="font11">实付金额：¥{{actuallyPaid}}</text>
        <text class="font11">付款方式：微信支付</text>
      </div>
    <div class="content7">
      <text class="font10">退款申请时间：{{refundApplyTime}}</text>
      <text class="font11">审核通过时间：{{approvalTime}}</text>
      <text class="font11">退款金额：¥{{actuallyPaid}}</text>
      <text class="font11">退款状态：正在退款</text>
    </div>
    </scroll-view>
    <div class="content5">
      <div class="btn2">
        <text class="font13">联系客服</text>
      </div>
    </div>
  </div>
</template>

<script>
  import NavbarTurn from "../../components/narbarTurn";
  export default {
    components: {
      NavbarTurn,
    },
    onLoad: function(options) {
      this.paintingIds = [];
      if(options.paintingIds != undefined){
        this.paintingIds = options.paintingIds.split(",");
      }
      this.dealId = options.dealId;
    },
    onShow(){
      this.$forceUpdate();
      this.queryPainting();
      this.queryAllByDealId();
    },
    onPullDownRefresh () {
      this.queryPainting();
      this.queryAllByDealId();
    },
    data() {
        return {
          maProvince:'',
          maCity:'',
          maDetail:'',
          maArea:'',
          name:"",
          phone:"",
          address:'',
          commodityAmount:0,
          commodityDiscount:0,
          msgFormSon: '',
          msgFormSon1: '',
          paintingIds:[],
          paintings:[],
          dealId:0,
          orderNumber:'',
          orderTime:'',
          actuallyPaid:0,
          refundApplyTime:"2019/11/12 16:48:52",
          approvalTime:"2019/11/12 16:48:52",
          refundMoney:"¥6,000.00",
          refundState:"正在退款",
          shouldPay:0,
        }
      },
      methods: {
        getMsgFormSon(data) {
          this.msgFormSon = data;
        },
        getMsgFormSon1(data) {
          this.msgFormSon1 = data;
        },
        queryPainting(){
          this.paintings = [];
          this.commodityAmount = 0;
          this.commodityDiscount = 0;
          this.shouldPay = 0;
          for(let i = 0;i < this.paintingIds.length;i++){
            this.$request.post({
              url: '/api/painting/queryPainting',
              data: {
                'paintingId':this.paintingIds[i],
              }
            }).then(res => {
              this.paintings.push({
                paintingName:res.paintingName,
                paintingInfo:res.paintingInfo,
                imageUrlList:res.imageUrlList[0],
                paintingPrice:res.paintingPrice,
                discountedPrice:res.discountedPrice,
              })
              this.commodityAmount += parseFloat(res.paintingPrice);
              this.commodityAmount = parseFloat(this.commodityAmount);
              this.commodityDiscount += parseFloat(res.discountedPrice);
              this.commodityDiscount = parseFloat(this.commodityDiscount);
              this.shouldPay = parseFloat(this.commodityAmount - this.commodityDiscount);
              if(i == this.paintingIds.length - 1){
                this.commodityAmount = this.commodityAmount.toFixed(2);
                this.commodityDiscount = this.commodityDiscount.toFixed(2);
                this.shouldPay = this.shouldPay.toFixed(2);
              }
            })
          }
        },
        queryAllByDealId(){
          this.$request.post({
            url: '/api/deal/queryAllByDealId',
            data: {
              'dealId':this.dealId,
            }
          }).then(res => {
            this.actuallyPaid = res.objResult.actuallyPaid;
            this.name = res.objResult.memberName;
            this.phone = res.objResult.memberPhone;
            this.orderNumber = res.objResult.dealCode;
            this.orderTime = res.objResult.gmtCreate;
            this.maProvince = res.objResult.maProvince;
            this.maCity = res.objResult.maCity;
            this.maArea = res.objResult.maArea;
            this.maDetail = res.objResult.maDetail;
            this.address = res.objResult.maProvince + res.objResult.maCity + res.objResult.maArea +
              res.objResult.maDetail;
          })
        },
      },
    }
</script>

<style scoped>
  .body{
    background:rgba(247,247,247,1);
    width: 100%;
    height: 100%;
  }
  .content{
    margin-top: 63px;
    width:375px;
    height:40px;
    background:rgba(144,42,38,1);
    display: flex;
    flex-direction: row;
  }
  .font{
    width:70px;
    height:20px;
    font-size:14px;
    font-family:PingFangSC-Regular,PingFang SC;
    font-weight:400;
    color:rgba(255,255,255,1);
    line-height:20px;
    margin-left: 20px;
    margin-top: 10px;
  }
  .content2{
    width:375px;
    height:33px;
    background:rgba(255,255,255,1);
    margin-top: 8px;
    display: flex;
    flex-direction: row;
  }
  .font2{
    width:60px;
    height:17px;
    font-size:12px;
    font-family:PingFangSC-Regular,PingFang SC;
    font-weight:400;
    color:rgba(0,0,0,1);
    line-height:17px;
    margin-left: 13px;
    margin-top: 16px;
  }
  .font3{
    width:24px;
    height:17px;
    font-size:12px;
    font-family:PingFangSC-Regular,PingFang SC;
    font-weight:400;
    color:rgba(102,102,102,1);
    line-height:17px;
    margin-top: 16px;
  }
  .font4{
    width:76px;
    height:17px;
    font-size:12px;
    font-family:PingFangSC-Regular,PingFang SC;
    font-weight:400;
    color:rgba(102,102,102,1);
    line-height:17px;
    margin-top: 16px;
    margin-left: 140px;
  }
  .font5 {
    width:260px;
    height: 17px;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(102, 102, 102, 1);
    line-height: 17px;
    margin-top: 9px;
    margin-left: 73px;
    overflow: hidden;
    display:-webkit-box;
    text-overflow: ellipsis;
    -webkit-line-clamp:1;
    -webkit-box-orient:vertical;
  }
  .content3{
    width:375px;
    height:41px;
    background:rgba(255,255,255,1);
    display: flex;
    flex-direction: row;
  }
  .content4{
    width:375px;
    height:168px;
    background:rgba(255,255,255,1);
    margin-top:8px;
  }
  .font6{
    width:48px;
    height:17px;
    font-size:12px;
    font-family:PingFangSC-Regular,PingFang SC;
    font-weight:400;
    color:rgba(0,0,0,1);
    line-height:17px;
    margin-top:13px;
    margin-left:16px;
  }
  .line{
    width:351px;
    height:1px;
    margin-top:5px;
    margin-left:12px;
    background-color: #F7F7F7;
  }
  .content5{
    display: flex;
    flex-direction: row;
  }
  .pic{
    width:74px;
    height:70px;
    background-color: grey;
    margin-top:10px;
    margin-left:12px;
  }
  .font7{
    width:230px;
    overflow: hidden;
    display:-webkit-box;
    text-overflow: ellipsis;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    height:44px;
    font-size:16px;
    font-family:PingFangSC-Regular,PingFang SC;
    font-weight:400;
    color:rgba(47,49,51,1);
    line-height:22px;
    margin-left:8px;
    margin-top:8px;
  }
  .font8{
    width:53px;
    height:22px;
    font-size:16px;
    font-family:PingFangSC-Medium,PingFang SC;
    font-weight:500;
    color:rgba(225,140,30,1);
    line-height:22px;
    margin-left:-230px;
    margin-top:60px;
  }
  .line2{
    width:351px;
    height:1px;
    margin-top:10px;
    margin-left:12px;
    background-color: #F7F7F7;
  }
  .font9{
    width:155px;
    height:17px;
    font-size:12px;
    font-family:PingFangSC-Regular,PingFang SC;
    font-weight:400;
    color:rgba(102,102,102,1);
    line-height:17px;
    margin-top:12px;
    margin-left:208px;
  }
  .content6{
    width:375px;
    height:160px;
    background:rgba(255,255,255,1);
    display: flex;
    flex-direction: column;
    margin-top:8px;
  }
  .content7{
    width:375px;
    height:100px;
    background:rgba(255,255,255,1);
    display: flex;
    flex-direction: column;
    margin-top:8px;
  }
  .font10{
    height:16px;
    font-size:11px;
    font-family:PingFangSC-Regular,PingFang SC;
    font-weight:400;
    color:rgba(153,153,153,1);
    line-height:16px;
    margin-top:12px;
    margin-left:16px;
  }
  .font11{
    width:178px;
    height:16px;
    font-size:11px;
    font-family:PingFangSC-Regular,PingFang SC;
    font-weight:400;
    color:rgba(153,153,153,1);
    line-height:16px;
    margin-top:4px;
    margin-left:16px;
  }
  .btn2{
    width:375px;
    height:50px;
    background:rgba(144,42,38,1);
    position:fixed;
    bottom:0px;
    display: flex;
    flex-direction: row;
  }
  .font13{
    height:20px;
    font-size:14px;
    font-family:PingFangSC-Medium,PingFang SC;
    font-weight:500;
    color:rgba(255,255,255,1);
    line-height:20px;
    margin-top: 15px;
    margin-left: 160px;
  }
</style>
